<!--
 * @Description: 
 * @Author: 张文韬
 * @Date: 2022-09-12 10:27:20
 * @LastEditTime: 2022-09-12 11:00:51
 * @LastEditors: 张文韬
 * @Reference: 
-->
<template>
  <el-dropdown @command="onClick">
    <span class="el-dropdown-link"> 更多<i class="el-icon-arrow-down el-icon--right"></i> </span>
    <template v-slot:dropdown>
      <el-dropdown-menu >
        <el-dropdown-item
          v-for="(item, index) in btn"
          :key="index"
          :command="item.event"
          >{{ item.title }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import btnList from './btnList';
export default {
  name: 'e-btn-more',
  components: {},
  props: {
    btns: {
      type: Array,
      default() {
        return [];
      }
    },
    row: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  watch: {},
  computed: {
    btn() {
      const list = [];
      this.btns.map(item => {
        const type = this.$tools.getRawType(item);
        if (type === 'String') {
          if (btnList[item]) {
            list.push(btnList[item]);
          }
        }
        if (type === 'Object') {
          if (
            this.$tools.hasKey(item, 'title') &&
            this.$tools.hasKey(item, 'event')
          ) {
            list.push(item);
          }
        }
      });
      return list;
    }
  },
  methods: {
    onClick(eventName) {
      this.$emit(eventName, this.row);
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  padding: 0 10px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
